<template>
	<div class="document-left">
		<div class="document-left-show" :class="[catalogueType == false?'showTwo':'hiddenTwo']" @click="loadCatalogueShow">
			<span class="document-left-show-title">产</span>
			<span class="document-left-show-title">品</span>
		</div>
		<div class="menu-handle-bar">
			<div v-if="catalogueType == true" class="menu-handel-bar-itembox" @click="loadCatalogueHidden">
				<i class="menu-handel-bar-itembox-icon el-icon-arrow-left"></i>
			</div>
		</div>
		<div class="document-left-content" :class="[catalogueType == true?'show':'hidden']">
			<div class="document-left-function">
				<div class="document-left-function-item" v-for="(item,index) in functionForm">
					<i class="document-left-function-item-icon" :class="item.icon"></i>
					<span class="document-left-function-item-title" @click="loadFunction(item,index)"
						:class="[functionIndex == index?'choose-color':'']">{{item.title}}</span>
				</div>
			</div>
			<div class="document-left-tree">
				<el-tree :data="treeData" node-key="id" :props="props" :load="loadNode" lazy :default-expanded-keys="['']"  :expand-on-click-node="false">
					<span class="custom-tree-node" slot-scope="{ node, data }" @click="dataclick(data)">
						<img v-if="data.src" class="svg-icon" :src="data.src">
						<img v-else class="svg-icon" :src="node.expanded?flatFileIcon:folderIcon">
						<el-tooltip class="item" effect="dark" :content="data.label" placement="left">
                <span class="document-left-tree-span">{{ data.label }}</span>
            </el-tooltip>
						<div class="document-left-tree-iconBox">
							<!-- <popover></popover> -->
						<el-popover placement="bottom" trigger="hover" >
			                 <div class="popover-content">
				                <div class="popover-content-bottom">
					                <span class="popover-content-top-title" @click="loadFolder(data)">新建文件夹</span>
					                <span class="popover-content-top-title"  v-if="data.id" @click="delFolder(data)" >删除目录</span>
				               </div>

			             </div>
			                <i slot="reference" class="document-left-tree-more el-icon-more"></i>
                       </el-popover>
						</div>
					</span>
				</el-tree>
			</div>
		</div>
	  <folder ref="folder" @dirgetTreeDataclick='dirgetTreeDataclick'></folder>
	</div>
</template>

<script>
	// import popover from './popover.vue'
	import folder from './folder';
	import {getTreeData,del} from "@/api/dir"
	export default {
		data() {
			return {
				props: {
					label: 'indexName',
					children: [],
					isLeaf: 'isLeaf',
				},
				current: 1,
      			size:20,
      			total: 0,
				functionForm: [
					// {
					// title: '最近编辑的',
					// 	icon: 'el-icon-time'
					// },
					{
						title: '我创建的',
						icon: 'el-icon-user',
						value:1
					},
					// {
					// 	title: '回收站',
					// 	icon: 'el-icon-delete'
					// },
				],
				functionIndex: -1,
				treeData:[],
				catalogueType: true,
				folderIcon:require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
				flatFileIcon:require("../../../../img/53291f9df1685d566be7cc967d80d249.svg"),
				cataloguesrc:require("../../../../img/0aa34d50b616e6482cfb8ea7cf251d5b.svg"),

			}
		},
		components: {
			// popover
			folder
		},
		created(){
			this.dirgetTreeDataclick()
		},
		methods: {
			clear(){
				this.functionIndex= -1
			},
			// 创建根目录
			fatherdir(){
				this.$refs.folder.loadFolder()
			},
			delFolder(data){
		   const params = new URLSearchParams()
            params.append('ids', data.id)
            this.$confirm('确认删除?(有子目录时不可删除)', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(() => {
               del(params).then(res=>{
                this.$message("删除成功!")
				this.dirgetTreeDataclick()
              })
            })
			},
			loadFolder(data){
				this.$refs.folder.childrenFolder(data)
			},
			dataclick(data){
				this.$emit('filtercatalogue',data.id)
			},
			loadNode(node, resolve) {
				console.log('1111');
				console.log(node);
				// 一级节点处理
				if (node.level === 0) {
					// this.requestTree(resolve)
				}
				// 其余节点处理
				if (node.level >= 1) {
					// 注意！把resolve传到你自己的异步中去
					if(node.data.data.dirLevel==-1){
						   getTreeData({parentId:node.data.data.dirId,dirType:'02'}).then(res => {
						const {
							data
						} = res
						resolve(data.data)
					})
					}else{
						let level=Number(node.data.data.dirLevel)+1
						   getTreeData({level: level,parentId:node.data.data.dirId,dirType:'02'}).then(res => {
						const {
							data
						} = res
						resolve(data.data)
					})

					}
				}
			},
			dirgetTreeDataclick(){
				let params=new URLSearchParams()
				params.append('current',this.current)
				params.append('size',this.size)
				params.append('dirType','02')
				getTreeData(params,false).then(res=>{
				   this.treeData=res.data.data
				  res.data.data.forEach(item=>{this.$set(item,'src',this.cataloguesrc)})
				   let element=[{
					  data:{children:res.data.data, dirLevel:-1},
					  label:"全部",
					   id:'',
					   src:this.cataloguesrc
				   }]
				this.treeData=element
				})
			},
			loadFunction(item,index) {
				var _this = this
				if (_this.functionIndex == index) {
					_this.functionIndex = -1
					this.$emit('leftstatus',' ')
				} else {
					_this.functionIndex = index
					this.$emit('leftstatus',item.value)
				}

			},
			loadCatalogueShow(){
				this.catalogueType = true
			},
			loadCatalogueHidden(){
				this.catalogueType = false
			},
		}
	}
</script>

<style scoped>
	.document-left {
		display: flex;
		flex-flow: column nowrap;
		align-items: stretch;
		flex: 0 0 auto;
		position: relative;
		height: calc(100vh - 84px);
	}

	.document-left-content{
		/* overflow: hidden; */
	}

	.show {
		width: 232px;
		transition: all .5s;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.hidden {
		width: 30px;
		transition: all .5s;
		overflow: hidden;
	}

	.document-left-function {
		padding: 24px;
		border-bottom: 1px solid #dadee3;
		width: 232px;
		box-sizing: border-box;
	}

	.document-left-function-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 8px;
		padding-bottom: 8px;
		color: #5f6d84;
	}

	.document-left-function-item-icon {
		font-size: 16px;
		color: #c1c7d0;
		margin-right: 12px;
		color: #2c7ef8;
	}

	.document-left-function-item-title {
		font-size: 14px;
		cursor: pointer;
	}

	.document-left-function-item:hover {
		color: #2c7ef8;
	}

	.choose-color {
		color: #2c7ef8;
	}

	.menu-handle-bar {
		position: absolute;
		top: 0px;
		right: -10px;
		width: 10px;
		height: calc(100vh - 84px);
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-left: 1px solid #dadee3;
	}

	.menu-handel-bar-itembox {
		width: 12px;
		height: 56px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu-handle-bar:hover>.menu-handel-bar-itembox {
		background-color: #2c7ef8;
	}

	.menu-handel-bar-itembox-icon{
		font-size: 12px;
		color: white;
	}

	.document-left-tree {
		padding: 20px;
		position: relative;
		width: 232px;
		overflow: hidden;
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		/* padding-right:20px; */
		color: white;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.custom-tree-node:hover {
		color: #909BAA;
		padding-right: 22px;
	}

	.svg-icon {
		width: 18px;
		height: 18px;
		margin-right: 6px;
		flex-shrink: 0;
	}

	.document-left-tree-span {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #5f6d84;
		font-size: 14px;
	}

	.document-left-tree-more {
		font-size: 12px;
	}

	.document-left-tree-iconBox {
		position: absolute;
		right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.document-left-show{
		width: 30px;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 0;
		bottom: 0;
		background-color: white;
		z-index: 99;
	}
	.document-left-show-title{
		font-size: 12px;
		color: #909AAA;
		margin-top: 10px;
	}

	.showTwo{
		opacity: 1;
		transition: all .5s;
	}

	.hiddenTwo{
		opacity: 0;
		transition: all .5s;
	}
	.popover-content-bottom {
		padding-top: 10px;
	}
	.popover-content-top-title {
		color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		cursor: pointer;
	}
	.popover-content-top-title:hover {
		background-color: #f5f6f8;
			color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		cursor: pointer;
	}
</style>
